<template>
  <div class="box">
    <div class="search_top">
      <div class="search_box">
        <p style="margin-bottom: 10px">姓名:</p>
        <el-input placeholder="用户ID/账号" class="inp1"></el-input>
      </div>
      <div class="search_box">
        <p>电话:</p>
        <el-select v-model="value" placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <p>创建人:</p>
        <el-select v-model="value" placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <p>跟进人:</p>
        <el-select v-model="value" placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <p>性别:</p>
        <el-select v-model="value" placeholder="全部">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <p>年龄:</p>
        <el-select v-model="value" placeholder="请选择注册时间">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="search_bottom">
      <div class="search_box">
        <p>最近购买时间:</p>
        <el-input placeholder="开始时间" suffix-icon="el-icon-time"> </el-input>
        <el-input placeholder="结束时间" suffix-icon="el-icon-time"> </el-input>
      </div>
      <div class="search_box">
        <p>最近跟进时间:</p>
        <el-input placeholder="开始时间" suffix-icon="el-icon-time"> </el-input>
        <el-input placeholder="结束时间" suffix-icon="el-icon-time"> </el-input>
      </div>
      <div class="search_box">
        <p>注册时间:</p>
        <el-input placeholder="开始时间" suffix-icon="el-icon-time"> </el-input>
        <el-input placeholder="结束时间" suffix-icon="el-icon-time"> </el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
}
.search_top {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  /* align-items: center; */
  flex-wrap: wrap;
}
.search_box {
  width: 40%;
  margin: 0px 10px;
}
.search_top .el-input {
  margin: 10px 0;
  width: 100%;
}

.search_top div .el-select {
  margin: 10px 0;
  width: 100%;
}
.search_bottom {
  width: 100%;
  padding: 0 0 20px 13px;
  border-bottom: 1px solid #f2f2f2;
  margin-left: 12px;
}
.search_bottom .search_box {
  width: 100%;
  margin-bottom: 20px;
}
.search_bottom .search_box .el-input--suffix {
  width: 40%;
  margin: 20px 52px 10px 0px;
}
.el-dialog__body {
  padding: 30px 0;
}
</style>